<!DOCTYPE html>
        <html lang="en">
        <head>

            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Java 文档搜索</title>
            <link rel="stylesheet" href="css/bootstrap.min.css">
            <link rel="stylesheet" href="css/list.css">
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <script src="js/jq-paginator.js"></script>
        </head>
        <body>
        <div class="container">
            <!-- 1. 搜索框 + 搜索按钮 -->
            <div class="header">
                <input type="text">
                <button id="search-btn">搜索</button>
            </div>

    <!-- 2. 显示搜索结果 -->
    <div class="result">
        <!-- 包含了很多条记录 -->
        <!-- 每个 .item 就表示一条记录 -->

        <!-- 接下来要通过访问服务器的方式获取到搜索结果, 并且由 JS 动态生成页面元素 -->

    </div>
    <div class="demo">
        <ul id="pageContainer" class="pagination justify-content-center"></ul>
    </div>
</div>
        <style>
            /* 这部分代码来写样式 */
            /* 先去掉浏览器的默认样式 */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            /* 给整体的页面指定一个高度(和浏览器窗口一样高) */
            html, body {
                height: 100%;
                /* 设置背景图 */
                background-image: url(image/sky.jpg);
                /* 设置背景图不平铺 */
                background-repeat: no-repeat;
                /* 设置背景图的位置 */
                background-position: center center;
                /* 设置背景图的大小 */
                background-size: cover;
            }
    
            /* 针对 .container 也设置样式, 实现版心效果 */
            .container {
                /* 此处的宽度也可以设置成百分数的形式, 当前就使用一个固定宽度 */
                width: 1200px;
                height: 100%;
                /* 设置水平居中 */
                margin: 0 auto;
                /* 设置背景色, 让版心和背景图能够区分开 */
                background-color: rgba(255, 255, 255, 0.8);
                /* 设置圆角矩形 */
                border-radius: 10px;
                /* 设置内边距, 避免文字内容紧贴着边界 */
                padding: 20px;
    
                /* 加上这个属性, 超出元素的部分就会自动生成一个滚动条. */
                overflow: auto;
            }
    
            .header {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
    
            .header>input {
                width: 1050px;
                height: 50px;
                font-size: 22px;
                line-height: 50px;
                padding-left: 10px;
                border-radius: 10px;
            }
    
            .header>button {
                width: 100px;
                height: 50px;
                background-color: rgb(42,107,205);
                color: #fff;
                font-size: 22px;
                line-height: 50px;
                border-radius: 10px;
                border: none;
            }
    
            .header>button:active {
                background: gray;
            }
    
            .result .count {
                color: gray;
                margin-top: 10px;
            }
    
            .item {
                width: 100%;
                margin-top: 20px;
            }
    
            .item a {
                display: block;
                height: 40px;
    
                font-size: 22px;
                line-height: 40px;
                font-weight: 700;
    
                color: rgb(42,107,205);
            }
    
            .item .desc {
                font-size: 18px;
            }
    
            .item .url {
                font-size: 18px;
                color: rgb(0, 128, 0);
            }
    
            .item .desc i {
                color: red;
                /* 去掉斜体 */
                font-style: normal;
            }
        </style>
<!--<script src="js/jquery.js"></script>-->

<script>
    // 放置用户自己写的 js 代码
    let button = document.querySelector("#search-btn");
    button.onclick = function() {
        // 先获取到输入框的内容
        let input = document.querySelector(".header input");
        let query = input.value;
        let statIndex =  0; //页码中的值
        let endIndex  =  10 ; //同理

        console.log("query: " + query);
        // 然后构造一个 ajax 请求发给服务器

        $.ajax({
            type: "GET",
            url: "searcher?query=" + query+"&statIndex="+statIndex+"&endIndex="+endIndex,
            success: function(data, status) {
                // success 这个函数会在请求成功后调用.
                // data 参数就表示拿到的结果数据
                // status 参数就表示 HTTP 状态码
                // 根据收到的数据结果, 构造出页面内容.
          //       console.log(data);
                 for(let key in data){
        //             console.log("总数是"+key);
                     buildResult(data[key], key);
                 }
            }
        })
    }

    function buildResult(data, key) {
        // 通过这个函数, 来把响应数据给构造成页面内容.
        // 要做的工作就是, 遍历 data 中的每个元素,
        // 针对每个元素都创建一个 div.item, 然后把标题, url, 描述都构造好
        // 再把这个 div.item 给加入到 div.result 中
        // 这些操作都是基于 DOM API 来展开~

        // 获取到 .result 这个标签
        let result = document.querySelector('.result');
        // 清空上次的结果.
        result.innerHTML = '';

        // 先构造一个 div 用来显示结果的个数
        let countDiv = document.createElement('div');
        countDiv.className = 'count';
        result.appendChild(countDiv);

        // 这就相当于 java 中的 for each
        // 此处得到的 item 就会分别代表 data 中的每个元素
        for (let item of data) {
            let itemDiv = document.createElement('div');
            itemDiv.className = 'item';

            // 构造一个标题
            let title = document.createElement('a');
            title.href = item.url;
            title.innerHTML = item.title;
            title.target = '_blank';
            itemDiv.appendChild(title);

            // 构造一个描述
            let desc = document.createElement('div');
            desc.className = 'desc';
            desc.innerHTML = item.desc;
            itemDiv.appendChild(desc);

            // 构造一个 url
            let url = document.createElement('div');
            url.className = 'url';
            url.innerHTML = item.url;
            itemDiv.appendChild(url);

            // 把 itemDiv 加到 .result 中
            result.appendChild(itemDiv);

        }
      //  console.log(data);
        var num = parseInt(key);
    //    console.log("接收到的key："+num);
        countDiv.innerHTML = '当前找到 ' + num + '个结果!';
        $("#pageContainer").jqPaginator({
            //现在可以获取到当前页的数量 但是你这里是需要所有数据的数量 因此这个需要你后端接口返回这个全部数量
            //那你直接把你返回的数据的数量 取出来 放到这里就可以了嘛
            totalCounts: num, //总记录数
            pageSize: 10,    //每页的个数
            visiblePages: 10, //可视页数
            currentPage: 1,  //当前页码
            first: '<li class="page-item"><a class="page-link">首页</a></li>',
            prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
            next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
            last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
            page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
            //页面初始化和页码点击时都会执行

            onPageChange: function (page, type) {
                if (type == "change") {
                    statIndex = page * 10 - 10;
                    endIndex = page * 10;
                    let input = document.querySelector(".header input");
                    let query = input.value;
                    $.ajax({
                        type: "GET",
                        url: "searcher?query=" + query + "&statIndex=" + statIndex + "&endIndex=" + endIndex,
                        success: function (data, status) {
                            // success 这个函数会在请求成功后调用.
                            // data 参数就表示拿到的结果数据
                            // status 参数就表示 HTTP 状态码
                            // 根据收到的数据结果, 构造出页面内容.
                            // console.log(data);
                            buildResult2(data, page, num);
                        }
                    });
                }
            }
        });

    }

    function buildResult2(data2, page, num) {
        console.log("切换页码收到的data："+data2);
        // 获取到 .result 这个标签
        let result = document.querySelector('.result');
        // 清空上次的结果.
        result.innerHTML = '';

        // 先构造一个 div 用来显示结果的个数
        let countDiv = document.createElement('div');
        countDiv.innerHTML = '当前找到 ' + num + '个结果!';
        countDiv.className = 'count';
        result.appendChild(countDiv);
        var data = data2[num];
        for (let item of data) {
            let itemDiv = document.createElement('div');
            itemDiv.className = 'item';

            // 构造一个标题
            let title = document.createElement('a');
            title.href = item.url;
            title.innerHTML = item.title;
            title.target = '_blank';
            itemDiv.appendChild(title);

            // 构造一个描述
            let desc = document.createElement('div');
            desc.className = 'desc';
            desc.innerHTML = item.desc;
            itemDiv.appendChild(desc);

            // 构造一个 url
            let url = document.createElement('div');
            url.className = 'url';
            url.innerHTML = item.url;
            itemDiv.appendChild(url);

            // 把 itemDiv 加到 .result 中
            result.appendChild(itemDiv);

        }
     //   console.log("当前页码page为："+page);
        $("#pageContainer").jqPaginator('option', 'currentPage', page);
    }
</script>
</body>
</html>
